<html>
<head><title>Setup Your TAToo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript" src="tatoo_setup2.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>

<style> 
body {
	background:#2E2E2E;
}
 
h1 {
	color: white;
	font-family: Georgia, serif;
	font-size: large;
	text-align:center;
}
 
.settingsCat {
	background:#C6E78C;
	margin:10px auto;
	padding:10px;
	width:300px;
	text-align:center;
}
.settingsCat h2 {
font-weight: bold;
font-family: Georgia, serif;
font-size: medium;
text-align:center;
margin:3px;
}
 
.settingsCat h3 {
font-weight: bold;
color: gray;
font-family: sans-serif;
font-size: x-small;
text-align:center;
margin:3px;
}
 
.resultsDiv {
background: #8CBEE3;
}
 
.sizeInput {
	width: 50px;
	text-align: center;
	margin: 10px 0 0 0;
}
 
textarea {
	width: 300px;
	height: 50px;
}
 
.pushButtons {
background: #637555;
}
 
.divider {
	color: #fff;
	font-size: x-small;
	font-weight: bold;
	font-family: sans-serif;
	width: 300px;
	margin: 10px auto;
	text-align:center;
}
 
.buttons {
	width: 300px;
	margin: 10px auto;
	text-align:center;
}
 
.textInput {
	width: 300px;
	margin: 5px auto 0 auto;
}
 
.optionLabel {
	color: black;
	font-family: sans-serif;
	font-size: small;
	font-style: italic;
}
 
#codeOutput, #cssOutput {
	background: #ddd;
	color: #333;
}
 
</style> 
 
</head>
<body> 
<h1>Setup Your TAToo</h1> 
<div class="settingsCat" id="sizeBox"><h2>Size</h2><h3>In pixels.</h3> 
<input type="text" maxlength="4" class="sizeInput" id="sizeWidth" /><br /><span class="optionLabel">Width</span> <br/> 
<input type="text" maxlength="4" class="sizeInput" id="sizeHeight" /><br /><span class="optionLabel">Height</span> <br/> 
</div> 
 
<div class="divider">....................Toggle Advanced Options....................</div> 
<div id="advancedOptions"><div> 
	<div class="settingsCat" id="locationBox"> 
		<h2>Location of Widget</h2> 
		<h3>Unless you installed a version on your own servers, you can keep this at the default.</h3> 
		<input type="text" id="locationUrl" class="textInput" /><br /><span class="optionLabel">Url</span> <br/> 
	</div> 
 
	<div class="settingsCat" id="colourBox"> 
		<h2>Colour</h2> <h3>in RGB Hex -> e.g. 00ff00</h3> 
		<div style="float:left;width:200px;margin:10px 0;"> 
			<object width="200" height="150" id="colorsetter" align="middle"> 
			<param name="allowScriptAccess" value="sameDomain" /> 
			<param name="movie" value="colorsetter.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#333333" />	<embed src="colorsetter.swf" quality="high" bgcolor="#333333" width="200" height="150" name="colorsetter" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
			</object> 
		</div> 
		<div style=""> 
		<input class="color {required:false, pickerFaceColor:'#8CBEE3', pickerBorder:0, pickerInset:0} sizeInput" maxlength="6" value="66ff00" id="backColor" /><br /><span class="optionLabel">Background</span><br/> 
			<input class="color {required:false, pickerFaceColor:'#8CBEE3', pickerBorder:0, pickerInset:0} sizeInput" maxlength="6" value="66ff00" id="headColor" /><br /><span class="optionLabel"><br /><span class="optionLabel">Category Heading</span> <br/> 
			<input class="color {required:false, pickerFaceColor:'#8CBEE3', pickerBorder:0, pickerInset:0} sizeInput" maxlength="6" value="66ff00" id="resultsColor" /><br /><span class="optionLabel">Results Heading</span> <br/> 
			 <div class="buttons"><input type="submit" id="previewLink"value="Preview" /></div> 
		</div> 
	</div> 
 
	<div class="divider">....................Toggle Advanced Options....................</div> 
</div></div> 
 
<div class="settingsCat resultsDiv" id="results1Div"> 
	<div class="buttons"><input type="submit" id="defaultsLink" value="Revert to Defaults" /></div> 
</div><div class="settingsCat resultsDiv" id="results2Div">	
	<h2>HTML Results</h2> <h3>Click "<input type="submit" id="generateLink"value="Generate" />" to output HTML code.</h3> 
	<input id="codeOutput"  class="textInput" type="text" readonly="" value='Click "Generate" to output code.' /> 
	<h3 id="afterGenerate"></h3>
</div> 
 
</body> 
</html>